<template>
    <BaseParam :label="label" :help="help">
        <el-slider
            v-model="sliderValue"
            :min="config?.min"
            :max="config?.max"
            :step="config?.step || 1"
            :show-input="config?.showInput"
            :show-stops="config?.showStops"
            :range="config?.range"
            @change="handleChange"
        />
    </BaseParam>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { BaseParam } from './index';

const props = defineProps<{
    modelValue?: number | number[];
    label: string;
    help?: string;
    config?: {
        min?: number;
        max?: number;
        step?: number;
        showInput?: boolean;
        showStops?: boolean;
        range?: boolean;
    };
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', value: number | number[]): void;
}>();

const sliderValue = ref(props.modelValue ?? (props.config?.range ? [0, 100] : 0));

watch(() => props.modelValue, (newValue) => {
    sliderValue.value = newValue ?? (props.config?.range ? [0, 100] : 0);
});

const handleChange = (value: number | number[]) => {
    emit('update:modelValue', value);
};
</script> 